<template>
	<el-tooltip effect="dark" v-show="$currentRole>1" :content="statusInfo" placement="top">
    <span class="implement-btn" :class="btnStatus" @click="handleConfirm">
      <i class="el-icon-success"></i>
    </span>
	</el-tooltip>
</template>

<script>
	export default {
		name: "confirmBtnModule",
		data() {
			return {
				btnStatus: null,
				statusInfo: ""
			};
		},
		props: ["id", "status"],
		watch: {
			status: {
				handler(val) {
					// 0 | 1
					if (val === 1) {
						this.btnStatus = "success";
					} else {
						this.btnStatus = "info";
					}

					this.handleStatusInfo();
				},
				immediate: true
			}
		},
		methods: {
			handleStatusInfo() {
				let status = this.btnStatus === "success" ? "取消实施埋点" : "实施埋点";
				this.statusInfo = status;
				return status;
			},
			// 确认
			handleConfirm() {
				let title = "埋点实施提示";
				let status = this.handleStatusInfo();
				this.$confirm(`确定要${status}吗？`, title, {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
					.then(async () => {
						let operateType = this.btnStatus === "success" ? 4 : 3;
						let data = {
							id: this.id,
							operateType
						};
						let res = await this.$eventApi.eventStatusUpdate(data);
						if (res) {
							this.$message({
								type: "success",
								message: `${operateType == 4?'已确认将该位置插码完全删除':'已确认对该位置实施埋点'}`
							});
							this.btnStatus = this.btnStatus === "success" ? "info" : "success";
							this.handleStatusInfo();
						}
					})
					.catch(() => {});
			}
		}
	};
</script>

<style scoped lang="scss">
	.implement-btn {
		font-size: 18px;
		cursor: pointer;

		&.success {
			color: #01b27a;
		}

		&.info {
			color: #303133;
		}
	}
</style>
